/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-use-before-define */
/* eslint-disable wrap-iife */
/* eslint-disable func-names */
/* eslint-disable no-shadow */
import React, { useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
import { useSelector } from 'dva';
import styles from './index.less';

const keys = {
  post: {
    v3key: '6Lc-YiohAAAAACCJjG0AxCXmSfla79fF93akXEpL',
    v2key: '6LfOYSohAAAAAIUYkfNYXKppbEqYvNctotnss8zP',
  },
  yz: {
    v3key: '6LeCASkhAAAAALfyCATci9v0ThP6neJ3zDGmKdeq',
    v2key: '6LeBASkhAAAAAFjmCkNjD4dMrz_ni1yt2oRgsAoi',
  },
  yjy: {
    v3key: '6Lda5SohAAAAAA1dGMTfd_QWwS2538AA7VkYRMbM',
    v2key: '6LdS5SohAAAAAHiw729-SFgcWF6ApR9OBB8R6FN9',
  },
  td: {
    v3key: '6LeEP4IhAAAAADKfwWJ6-resyTPvrVsSE8wzTxD0',
    v2key: '6LceQYIhAAAAAPXGIOah0_tqb6XQAhMcitP5DHq0',
  },
};

const Index = forwardRef((props, ref) => {
  const { options = {} } = useSelector(({ setting }) => setting);
  const { key, subKey } = options;

  const domRef = useRef();
  const { v3key, v2key } = keys[subKey || key];

  const googleRobot = ({ callback, cbReqParams = {} }) => {
    const { ready, execute, render } = window.grecaptcha || {};
    ready(() => {
      execute(v3key, { action: 'submit' }).then(token => {
        if (callback) {
          const defaultParams = {
            token,
            v3key,
            ...cbReqParams,
          };
          callback(defaultParams, cb => {
            if (domRef.current.rendered) {
              return;
            }
            render('recaptcha_element', {
              sitekey: v2key,
              callback(token) {
                const v2Params = {
                  v2Token: token,
                  v2key,
                  ...cbReqParams,
                };
                cb(v2Params);
                domRef.current.rendered = false;
              },
            });
            domRef.current.rendered = true;
          });
        }
      });
    });
  };

  useEffect(
    () => {
      (function(w, d, s, q, i) {
        const hasScript = document.getElementById('recaptcha');
        if (hasScript) return;
        w[q] = w[q] || [];
        const f = d.getElementsByTagName(s)[0];
        const j = d.createElement(s);
        j.async = true;
        j.id = 'recaptcha';
        j.src = `https://www.recaptcha.net/recaptcha/api.js?render=${i}`;
        f.parentNode.insertBefore(j, f);
      })(window, document, 'script', 'recaptcha', v3key);
    },
    [v3key],
  );

  useImperativeHandle(ref, () => ({
    googleRobot,
    hide: () => {
      domRef.current.style.display = 'none';
    },
    show: () => {
      domRef.current.style.display = 'block';
    },
  }));

  return (
    <div className={styles.recaptcha}>
      <div className={styles['recaptcha-content']} ref={domRef} id="recaptcha_element" />
    </div>
  );
});

export default Index;
